<template>
  <!--输入框部分-->
  <view>
    <view v-for="(item,index) in inputBoxList" :key="index">
      <view v-if="index===0||index%item.baseNumber===0" class="passenger-information">旅客信息</view>
      <view v-if="item.personType" class="traveler-title">{{ commonDictMap[item.personType]+'信息' }}</view>
      <view class="traveler-input-box">
        <text>{{ item.language === "EN" ? "姓名" : "First Name" }}</text>
        <input
          :placeholder="
            item.language === 'EN' ? '在此输入姓名' : '在此输入名字，例如jia jia'
          "
          :value="item.first_name"
          data-model="first_name"
          :data-index="index"
          type="value"
          placeholder-class="placeholder"
          @blur="changeInput"
        >
        <view
          :class="item.language === 'EN' ? 'EN-class' : 'CN-class'"
          @click="changeLanguage(index)"
        >{{ item.language }}</view>
        <image src="@/static/image/default/contacts/contacts.png" @click="choicePassenger(index)" />
      </view>
      <view v-if="item.language === 'CN'" class="traveler-input-box">
        <text>Last Name</text>
        <input
          placeholder="在此输入姓氏，例如Guo"
          placeholder-class="placeholder"
          :value="item.last_name"
          data-model="last_name"
          :data-index="index"
          type="value"
          @blur="changeInput"
        >
      </view>
      <view v-if="index===0" class="traveler-input-box">
        <text>联系方式</text>
        <input
          placeholder="在此输入联系方式"
          placeholder-class="placeholder"
          :value="item.telephone"
          data-model="telephone"
          :data-index="index"
          type="value"
          @blur="changeInput"
        >
      </view>
      <view class="traveler-input-box notBorder">
        <text>{{ commonDictMap[item.id_type] }}</text>
        <input
          :placeholder="
            item.id_type === 'GovernmentId' ? '在此输入身份证' : '在此输入护照'
          "
          placeholder-class="placeholder"
          :value="item.id_no"
          data-model="id_no"
          :data-index="index"
          type="value"
          @blur="changeInput"
        >
        <image src="@/static/image/default/contacts/transformation.png" @click="changeID(index)" />
      </view>
      <view v-if="index!==inputBoxList.length-1" class="traveler-boundary" />
    </view>
  </view>
</template>
<script>
export default {
  props: {
    inputBoxList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      commonDictMap: this.$commonDictMap
    }
  },
  methods: {
    // 同步input
    changeInput(e) {
      this.$emit('changeInput', e)
    },
    // 改变语言
    changeLanguage(index) {
      this.$emit('changeLanguage', index)
    },
    // 改变证件类型
    changeID(index) {
      this.$emit('changeID', index)
    },
    // 选择常用旅客
    choicePassenger(index) {
      this.$emit('choicePassenger', index)
    }
  }
}
</script>
<style>
/* 标题 */
.traveler-title {
  font-size: 28rpx;
  font-weight: 800;
  color: #306de9;
  margin-left: 30rpx;
  margin-top: 30rpx;
}
/* // 旅客信息 */
.passenger-information {
  font-size: 36rpx;
  font-weight: 800;
  margin-top: 22rpx;
  margin-left: 30rpx;
  margin-bottom: 30rpx;
}
/* 输入框，外部包裹 */
.traveler-input-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 670rpx;
  height: 60rpx;
  margin-left: 20rpx;
  border-bottom: 2rpx solid #f1f1f1;
  font-size: 28rpx;
  color: #000000;
  margin-top: 30rpx;
}
.traveler-input-box > input {
  position: absolute;
  margin-left: 184rpx;
  width: 320rpx;
}
.traveler-input-box > text {
  margin-left: 10rpx;
}
.traveler-input-box > image {
  width: 32rpx;
  height: 32rpx;
  margin-top: 4rpx;
}
.EN-class {
  margin-left: 474rpx;
}
.CN-class {
  margin-left: 379rpx;
}
.placeholder {
  font-size: 28rpx;
  color: #cccccc;
}
.traveler-boundary {
  width: 670rpx;
  height: 12rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  background-color: #f1f1f1;
}
.notBorder {
  border: none;
}
</style>

